<template>
  <Layout>
    <van-nav-bar title="vite-webapp-template" left-text="返回" left-arrow @click-left="toHome" />
    <van-form style="margin-top: 15px">
      <van-field v-model="formData.short_value" label="普通数据" placeholder="请输入" />
      <van-field v-model="formData.long_value" label="持久化数据localStorage" />
      <div class="button-row">
        <van-button type="success" placeholder="请输入" @click="onRefresh">
          刷新
        </van-button>
        <van-button type="primary" @click="onSave"> 保存 </van-button>
      </div>
    </van-form>
  </Layout>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import useLongStore from "@/store/long";
import useShortStore from "@/store/short";
const longStore = useLongStore();
const shortStore = useShortStore();
const router = useRouter();
const formData = reactive({
  long_value: "",
  short_value: "",
});
const onSave = () => {
  const { long_value, short_value } = formData;
  longStore.updateVal({ name: long_value }); //持久化数据localStorage
  shortStore.updateVal({ name: short_value }); //普通数据
};
const onRefresh = () => {
  location.reload();
};
onMounted(() => {
  let { dataInfo } = longStore;
  console.log(dataInfo);
  formData.long_value = dataInfo?.name || "";
  let { data } = shortStore;
  formData.short_value = data?.name || "";
});
const toHome = () => {
  router.push("/");
};
</script>

<style scoped lang="scss">
.button-row {
  margin: 15px 0;
  justify-content: space-between;
  display: flex;

  button {
    width: 45%;
  }
}
</style>
